<template>
  <WidgetPlaceholder
    class="fa-attachment-fill"
    :data="data"
    :title="fileName"
    :icon="loading ? 'el-icon-loading' : ''"
    :text="fileName || (data.isUse ? '点击上传' : '')"
    @click.native="areaClick"
  >
    <input
      v-if="data.isUse"
      ref="input"
      class="fa-attachment-fill__input"
      type="file"
      :accept="accept"
      @change="fileChange"
    />
  </WidgetPlaceholder>
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs } from 'vue'
import { Viewer } from '@/types'
import { Widget } from '@/models'
import useUpload from './useUpload'
import WidgetPlaceholder from '@/components/widget-base/WidgetPlaceholder.vue'

/** 附件填写 */
export default defineComponent({
  name: 'FaAttachmentFill',

  components: { WidgetPlaceholder },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 文档查看组件 */
    viewer: {
      type: Object as PropType<Viewer>,
      required: true
    }
  },

  setup(props) {
    const { data, viewer } = toRefs(props)

    return useUpload({
      data,
      viewer
    })
  }
})
</script>

<style lang="scss">
.fa-attachment-fill {
  background: #fff;
  border: $border-solid;
  border-radius: 4px;
  cursor: pointer;

  &.fa-widget-placeholder {
    height: 32px;
  }

  &:hover {
    border-color: $border-color-dark;
  }

  &:active {
    background: $background-color-secondary;
  }

  &__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
  }
}
</style>
